<template>
  <el-dialog :title="title" :visible="dialogVisible" :width="mobileView ? '90%' : '500px'" append-to-body :fullscreen="mobileView" @close="handleClose">
    <price-form
      ref="priceForm"
      :form-data="formData"
      :isMobile="mobileView">
    </price-form>
    <div slot="footer" class="dialog-footer" :class="{'mobile-footer': mobileView}">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import PriceForm from './PriceForm.vue'

export default {
  name: 'PriceDialog',
  components: {
    PriceForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    mobileView: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible() {
      return this.visible;
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.priceForm.validate().then(valid => {
        if (valid) {
          const formData = this.$refs.priceForm.getFormData();
          this.$emit('submit', formData);
        }
      });
    },
    handleClose() {
      this.$refs.priceForm.resetFields();
      this.$emit('update:visible', false);
    }
  }
}
</script> 